<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-1-1-下拉菜单</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

	<div class="container">
		<div class="dropdown pull-right">
			<!-- dropdown-toggle  可以点击多次切换状态的一个类名，用于button -->
			<button class="btn-default dropdown-toggle " type="button" data-toggle="dropdown">
				下拉菜单
				<span class="caret"></span><!-- 下拉小箭头 -->
			</button>

			<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledbdy="dropdownMenu1">
				<li class="dropdown-header">1 2 3 4</li>
					<li><a href="#" role="menuitem">li  1</a></li>
					<li><a href="#" role="menuitem">li  2</a></li>
					<li><a href="#" role="menuitem">li  3</a></li>
					<li><a href="#" role="menuitem">li  4</a></li>


				<li class="divider" rolepresentation></li><!-- 分割线 -->
				<li class="dropdown-header">一 二 三 四</li>
					<li><a href="#" role="menuitem">li  一</a></li>
					<li><a href="#" role="menuitem">li  二</a></li>
					<li class="disabled"><a href="#" role="menuitem">li  三</a></li>
					<li><a href="#" role="menuitem">li  四</a></li>


			</ul>
		</div>

	</div>



<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>